<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="<%=request.getContextPath() %>/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/ext/ext-all.js"></script>
</head>
<script type="text/javascript">
	Ext.onReady(function(){
		var itemsPerPage = 50;
		var store=new Ext.data.Store({ 
// 			pageSize: itemsPerPage, 
			fields : [
				'dbid',
				'customerid',
				'brand',
				'name',
				'mobile',
				'type',
				'serial',
				'color',
				'price',
				{ name: 'buydate' , type : 'date' },
				'itemtype',
    		],
    		proxy : {  
   				type : 'ajax', 
				url : '<%=request.getContextPath() %>/execlMobile/listTopExeclMobile.action',
   				reader : { type : 'json',root : 'execlMobilePageBeans' ,totalProperty: 'totalProperty'}   
    		} , 
			autoLoad : false,  
   			timeout: 900000,
   		 groupField: 'name',
   		 sorters: ['name','customerid'],
		}); 
		var gridPanel= Ext.create('Ext.grid.GridPanel', {
 			store: store,    
			selModel : Ext.create('Ext.selection.CheckboxModel',{   mode: 'SINGLE' }),
			columnLines: true,
			columns: [
					{ text :'dbid', flex : 1 , sortable : true , hidden : true , dataIndex :'dbid' },
					{ text :'customerid', flex : 1 , sortable : true ,hidden: true, dataIndex :'customerid' },
					{ text :'name', flex : 1 , sortable : true , dataIndex :'name' },
					{ text :'mobile', flex : 1 , sortable : true , dataIndex :'mobile' },
					{ text :'brand', flex : 1 , sortable : true , dataIndex :'brand' },
					{ text :'type', flex : 1 , sortable : true , dataIndex :'type' },
					{ text :'serial', flex : 1 , sortable : true , dataIndex :'serial' },
					{ text :'color', flex : 1 , sortable : true , dataIndex :'color' },
					{ text :'price', flex : 1 , sortable : true , dataIndex :'price' },
					{ text :'buydate', flex : 1 , sortable : true , dataIndex :'buydate' , renderer:Ext.util.Format.dateRenderer('Y-m-d'), },
					{ text :'itemtype', flex : 1 , sortable : true , dataIndex :'itemtype' },
			],
			height: 350,
			width: 600,
			tbar: new Ext.Toolbar({
				height : '32' , autoWidth:true, autoShow:true,
				items:[
				       /*
				{ xtype: 'button', text: 'Add',tooltip: 'Add New Row',
					handler:  function (){
						var popWindow = new Ext.Window({
							id : 'AddExeclMobileWindow',
				    		width : 600,
				    		title : 'Add New Record.', 
				    		closable: true, 
				    		resizable: true,
				    		constrainHeader: true,
				    		modal: true,
				    	    plain: true, 
				    		layout : 'fit',
				    		x : 250, y : 100,
				    		items :[{
				    			xtype: 'form',
				    			layout: 'form',
				    			frame: true,
				    			bodyPadding: '2 2 0',
				    			fieldDefaults: {
				    				msgTarget: 'side',
				    				labelWidth: 75
				    			},
				    			defaultType: 'textfield',
				    			items :[
				    			 { 
				    					xtype: 'numberfield',
				    					fieldLabel: 'customerid',
				    					name: 'customerid',
				    					id: 'customerid',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'brand',
				    					name: 'brand',
				    					id: 'brand',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'type',
				    					name: 'type',
				    					id: 'type',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'serial',
				    					name: 'serial',
				    					id: 'serial',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'color',
				    					name: 'color',
				    					id: 'color',
				    			 }, 
				    			 { 
				    					xtype: 'numberfield',
				    					fieldLabel: 'price',
				    					name: 'price',
				    					id: 'price',
				    			 }, 
				    			 { 
				    					xtype: 'datefield',
				    					format: 'Y-m-d H:i:s',
				    					fieldLabel: 'buydate',
				    					name: 'buydate',
				    					id: 'buydate',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'itemtype',
				    					name: 'itemtype',
				    					id: 'itemtype',
				    			 }, 
				    			],
				    			 buttons :[
				    			 { 
				    					xtype: 'button',
				    					text: 'Save',
				    					name: 'SaveAddBtn',
				    					id: 'SaveAddBtn',
				    					handler:  function (){ 
				    						     this.up('form').getForm().doAction('submit',{ 
				    					             url:'<%=request.getContextPath() %>/execlMobile/insertExeclMobile.action', 
				    					             method:'post', 
				    					             params:'', 
				    					             success:function(form,action){ 
				    					                 Ext.Msg.alert('Add Success',action.result.info); 
				    					                 popWindow.close(); 
				    					                 store.reload(); 
				    					             }, 
				    					             failure:function(e){ 
				    					           	  console.info( e); 
				    					                  Ext.Msg.alert('error','Fail��'); 
				    					             } 
				    					           }); 
				    					},
				    			 }, 
				    			 { 
				    					xtype: 'button',
				    					text: 'Reset',
				    					name: 'ResetAddBtn',
				    					id: 'ResetAddBtn',
				    					handler:  function (){  this.up('form').getForm().reset();},
				    			 }, 
				    			 { 
				    					xtype: 'button',
				    					text: 'Close',
				    					name: 'CloseAddBtn',
				    					id: 'CloseAddBtn',
				    					handler:  function (){  popWindow.close();},
				    			 }, 
				    			 ] 
				    		}]
				    	});
						popWindow.show();
					}
				} ,
				{ xtype: 'button', text: 'Update',tooltip: 'Update Row',
					handler:  function (){
						var grid = this.ownerCt.ownerCt; 
						var checkRecord = grid.getSelectionModel().getSelection(); 
						if (checkRecord.length != 0) {
							var popWindow = new Ext.Window({
								id : 'updateWindow',
				    			width : 600,
				    			title : 'Update Record.', 
				    			closable: true, 
				    			resizable: true,
				    			constrainHeader: true,
				    			modal: true,
				    	   		plain: true, 
				    			layout : 'fit',
				    			x : 250, y : 100,
				    			items :[{
				    				xtype: 'form',
				    				id: 'updateForm',
				    				layout: 'form',
				    				frame: true,
				    				bodyPadding: '2 2 0',
				    				fieldDefaults: {
				    					msgTarget: 'side',
				    					labelWidth: 75
				    				},
				    				defaultType: 'textfield',
				    			items :[
				    			 { 
				    					xtype: 'numberfield',
				    					fieldLabel: 'dbid',
				    					name: 'dbid',
				    					id: 'dbid',
				    					readOnly: true,
				    			 }, 
				    			 { 
				    					xtype: 'numberfield',
				    					fieldLabel: 'customerid',
				    					name: 'customerid',
				    					id: 'customerid',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'brand',
				    					name: 'brand',
				    					id: 'brand',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'type',
				    					name: 'type',
				    					id: 'type',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'serial',
				    					name: 'serial',
				    					id: 'serial',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'color',
				    					name: 'color',
				    					id: 'color',
				    			 }, 
				    			 { 
				    					xtype: 'numberfield',
				    					fieldLabel: 'price',
				    					name: 'price',
				    					id: 'price',
				    			 }, 
				    			 { 
				    					xtype: 'datefield',
				    					format: 'Y-m-d H:i:s',
				    					fieldLabel: 'buydate',
				    					name: 'buydate',
				    					id: 'buydate',
				    			 }, 
				    			 { 
				    					xtype: 'textfield',
				    					fieldLabel: 'itemtype',
				    					name: 'itemtype',
				    					id: 'itemtype',
				    			 }, 
				    			],
				    			 buttons :[
				    			 { 
				    					xtype: 'button',
				    					text: 'Save',
				    					name: 'SaveUppdateBtn',
				    					id: 'SaveUppdateBtn',
				    					handler:  function (){ 
				    						     this.up('form').getForm().doAction('submit',{ 
				    					             url:'<%=request.getContextPath() %>/execlMobile/updateExeclMobile.action', 
				    					             method:'post', 
				    					             params:'', 
				    					             success:function(form,action){ 
				    					                 Ext.Msg.alert('UPdate Success',action.result.info); 
				    					                 popWindow.close(); 
				    					                 store.reload(); 
				    					             }, 
				    					             failure:function(e){ 
				    					           	  console.info( e); 
				    					                  Ext.Msg.alert('error','Fail��'); 
				    					             } 
				    					           }); 
				    					},
				    			 }, 
				    			 { 
				    					xtype: 'button',
				    					text: 'Reset',
				    					name: 'ResetUpdateBtn',
				    					id: 'ResetUpdateBtn',
				    					handler:  function (){  this.up('form').getForm().reset();},
				    			 }, 
				    			 { 
				    					xtype: 'button',
				    					text: 'Close',
				    					name: 'CloseAddBtn',
				    					id: 'CloseAddBtn',
				    					handler:  function (){  popWindow.close();},
				    			 }, 
				    			 ] 
				    			}]
				    		});
							popWindow.show();
							Ext.getCmp("updateForm").getForm().loadRecord(checkRecord[0]);
						}else{
							Ext.MessageBox.alert('错误提示','请至少�?择一条信�?');
				      }
				    }
				} , 
				 */
				{ xtype: 'button', text: 'Export',tooltip: 'Export To Excel',
					handler:  function (){
						var grid = this.ownerCt.ownerCt;
					 Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?',
							 function showResult(btn,text){
							 	if (btn == "yes"){
									var store = grid.getStore();
									var checkRecord = grid.getSelectionModel().getSelection();
									if (checkRecord.length != 0) {
										Ext.Ajax.request({
											url : '<%=request.getContextPath() %>/execlMobile/deleteExeclMobile.action',
											params : { dbid : checkRecord[0].data["dbid"] },
											success : function(response, options) {},
										});
										store.remove(checkRecord);
									}else{
										Ext.MessageBox.alert('������ʾ','������ѡ��һ����Ϣ!');
				       				}
								}
							}
						);
					}
				}
			] 
		}
		) ,
		viewConfig : { forceFit : true, scrollOffset : 0 },
		/*dockedItems: [{ xtype: 'pagingtoolbar', items:[
		                                            	'-',
		                                            	{
		                                                    text: 'Export Sort Data',
		                                                    pressed: true,
		                                                    enableToggle: true,
		                                                    toggleHandler: function(btn, pressed) {
		                                                    }
		                                            	}
		                                            	],store: store,  dock: 'bottom', displayInfo: true  }],*/
		title: 'ExeclMobile List ',
		}); 
		var searchPanel = Ext.create('Ext.form.Panel', {
		    defaultType: 'textfield',
			layout: { type: 'column', align: 'stretch',padding: 5 },
			frame: true,
		    items: [{
		    	columnWidth:0.5,
				xtype: 'container',
				flex: 1,
				border:false, 
				layout: 'anchor',
				defaultType: 'textfield',
				items: [
				        {
							xtype : 'numberfield',
		   					fieldLabel: 'Customerid',
		   					anchor:'95%',
		   					name: 'qryBeginIntCustomerid',
		   					id: 'qryBeginIntCustomerid',
		   					hidden:true
				        },
		 
				        {
							xtype : 'textfield',
		   					fieldLabel: 'Type',
		   					name: 'qryBeginStringType',
		   					id: 'qryBeginStringType',
		   					anchor:'95%',
		   					hidden:true
				        },
				        {
							xtype : 'textfield',
		   					fieldLabel: 'Color',
		   					name: 'qryBeginStringColor',
		   					id: 'qryBeginStringColor',
		   					anchor:'95%',
		   					hidden:true
				        },
				        {
							xtype : 'datefield',
							format: 'Y-m-d',
		   					fieldLabel: '开始日期',
		   					name: 'qryBeginDateBuydate',
		   					id: 'qryBeginDateBuydate',
		   					anchor:'95%'
				        },
				        {
							xtype : 'textfield',
		   					fieldLabel: '名额',
		   					value : '50',
		   					name: 'limitNumber',
		   					id: 'limitNumber',
		   					anchor:'95%'
				        }
				]
			},{
				columnWidth:0.5,
				xtype: 'container',
				flex: 1,
				layout: 'anchor', 
				defaultType: 'textfield',
				items: [
				        {
							xtype : 'textfield',
		   					fieldLabel: 'Serial',
		   					name: 'qryBeginStringSerial',
		   					id: 'qryBeginStringSerial',
		   					anchor:'95%',
		   					hidden:true
				        },
				        {
							xtype : 'datefield',
							format: 'Y-m-d',
		   					fieldLabel: '截止日期',
		   					name: 'qryEndDateBuydate',
		   					id: 'qryEndDateBuydate',
		   					anchor:'95%',
				        },
				        {
							xtype : 'textfield',
		   					fieldLabel: 'Itemtype',
		   					name: 'qryBeginStringItemtype',
		   					id: 'qryBeginStringItemtype',
		   					anchor:'95%',
		   					hidden:true
				        },
				        {
							xtype : 'textfield',
		   					fieldLabel: 'Brand',
		   					name: 'qryBeginStringBrand',
		   					id: 'qryBeginStringBrand',
		   					anchor:'95%',
		   					hidden:true
				        },
		{
	xtype :'checkbox',
	fieldLabel: 'Enable Like',
	name: 'qryLikeEnable',
	id : 'qryLikeEnable',
	anchor:'95%',
	hidden : true
},{
	xtype :'checkbox',
	fieldLabel: '显示消费记录',
	name: 'displayRecord',
	id : 'displayRecord',
	anchor:'95%',
	checked : true
}
				]
			}]
			,
			buttons: [{
		        text: ' Search ',
		        handler: function() {
		            store.load();
		        }
		    },{
		        text: ' Reset ',
		        handler: function() {
		            this.up('form').getForm().reset();
		        }
		    }]
		 });
		store.load({
			params : {
				//username : username,
				start:0 ,
				limit: itemsPerPage 
 			}
		});
 		store.on('beforeload',function(){
	 		Ext.apply(  store.proxy.extraParams, {
				qryLikeEnable : Ext.getCmp("qryLikeEnable").getValue(),
				qryBeginIntCustomerid : Ext.getCmp("qryBeginIntCustomerid").getValue(),
				qryBeginStringBrand : Ext.getCmp("qryBeginStringBrand").getValue(),
				qryBeginStringType : Ext.getCmp("qryBeginStringType").getValue(),
				qryBeginStringSerial : Ext.getCmp("qryBeginStringSerial").getValue(),
				qryBeginStringColor : Ext.getCmp("qryBeginStringColor").getValue(),
				qryBeginDateBuydate : Ext.getCmp("qryBeginDateBuydate").getRawValue(),
				qryEndDateBuydate : Ext.getCmp("qryEndDateBuydate").getRawValue(),
				qryBeginStringItemtype : Ext.getCmp("qryBeginStringItemtype").getValue(),
				limitNumber : Ext.getCmp("limitNumber").getValue(),
				displayRecord : Ext.getCmp("displayRecord").getValue(),
			})
		});
		var mainPanel =Ext.create('Ext.panel.Panel', {
			id : 'execlMobileMainPanel',
			layout: { type: 'vbox', align: 'stretch',padding: 5 },
			items: [ searchPanel , gridPanel  ],
			renderTo: Ext.getBody(),
		})
	});
</script>
